<template>
  <div>
    <div class="weui-flex header">
      <div class="weui-flex__item" :class="active === 1 ? 'active' : 'none'">
        <div class="placeholder">
          <svg-icon icon-class="merchant" class="merchant"></svg-icon>
        </div>
        <span>基础信息</span>
      </div>
      <div class="weui-flex__item" :class="active === 2 ? 'active' : 'none'"><div class="placeholder"><svg-icon icon-class="bank" class="bank"></svg-icon></div><span>账户信息</span></div>
      <div class="weui-flex__item" :class="active === 3 ? 'active' : 'none'"><div class="placeholder"><svg-icon icon-class="wode_1" class="leader"></svg-icon></div><span>法人信息</span></div>
      <div class="weui-flex__item" :class="active === 4 ? 'active' : 'none'"><div class="placeholder"><svg-icon icon-class="lianxiren1" class="lianxiren"></svg-icon></div><span>联系人信息</span></div>
    </div>
    <div class="main">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
 computed: {
   active() {
     return this.$store.state.Icons.icon
   }
 },
 created() {
   document.title = '商户入驻'
 }

}
</script>


<style lang="scss">
  @import '../../styles/index';
  .header {
    position: relative;
    padding: px2rem(30px) 0;
    border-bottom: 1px solid #ccc;
    .active .placeholder {
      background-color: $blue;
    }
  }
  .header .merchant, .bank, .leader, .lianxiren {
    width: px2rem(50px);
    height: px2rem(50px);
    color: #fff;
  }
  .header .placeholder {
    background: #eee;
    border-radius: 50%;
    padding: px2rem(10px);
    height: px2rem(100px);
    width: px2rem(100px);
    line-height: px2rem(100px);
    text-align: center;
    display: inline-block;
  }
  .header .weui-flex__item {
    z-index: 10;
    position: relative;
    display: inline-block;
    width: 25%;
    text-align: center;
    span {
      font-size: px2rem(24px);
      display: block;
    }
  }
  .main {
    padding: 0 px2rem(30px) px2rem(30px) px2rem(30px);
    font-size: px2rem(28px);
    .weui-cells::before .weui-cells::after {
      border-bottom: unset;
      border-top: unset;
    }
  }
</style>
